<template>
    <div class="footer">
      <div class="colortitle">
        <p>{{ $t("language.home.footer.footeritem1.title") }}</p>
        <div>
          <span>{{ $t("language.home.footer.footeritem1.item1") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item2") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item3") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item4") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item5") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item6") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item7") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item8") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item9") }}</span>
          <span>{{ $t("language.home.footer.footeritem1.item10") }}</span>
        </div>
      </div>
      <div class="colortitle">
        <p>{{ $t("language.home.footer.footeritem2.title") }}</p>
        <div>
          <span>{{ $t("language.home.footer.footeritem2.item1") }}</span>
          <span>{{ $t("language.home.footer.footeritem2.item2") }}</span>
        </div>
      </div>
      <div class="colortitle">
        <p>{{ $t("language.home.footer.footeritem3.title") }}</p>
        <div>
          <NuxtImg src="/img/c27.jpg" alt="" />
          <NuxtImg src="/img/c28.png" alt="" />
          <NuxtImg src="/img/c29.png" alt="" />
        </div>
      </div>
      <dl>
        <dd>
          <NuxtImg src="/img/1.png" alt="" />
          <NuxtImg src="/img/2.png" alt="" />
          <NuxtImg src="/img/3.png" alt="" />
          <NuxtImg src="/img/4.png" alt="" />
          <NuxtImg src="/img/5.png" alt="" />
          <NuxtImg src="/img/6.png" alt="" />
        </dd>
      </dl>
      <div class="bottomlogo">
        <NuxtImg src="/img/world.png" alt="" />
        <p>{{ $t("language.home.footer.footertext") }}</p>
        <p class="last">{{ $t("language.home.footer.version") }}</p>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
 
  </script>
  
  <style scoped lang="scss">
  .footer {
    width: 100%;
    min-height: 180px;
    padding: 50px 20px 40px;
    background: #1a1c20;
    .colortitle {
      p {
        margin-top: 11px;
        color: #33961c;
        margin-bottom: 8px;
      }
  
      div {
        span {
          display: inline-block;
          font-size: 14px;
          color: #b5bac8;
        }
        span {
          margin-right: 20px;
          padding: 8px 0;
        }
        img {
          width: 40px;
          height: 40px;
          margin: 8px 16px 0 0;
          border-radius: 5px;
        }
      }
    }
    dl {
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 15px 0;
      margin-top: 20px;
      dd {
        @include flex(row, space-around, center);
        flex-wrap: wrap;
  
        img {
          height: 40px;
          margin: 0 10px;
        }
      }
    }
  }
  .bottomlogo {
    @include flex(column, flex-start, center);
    img {
      margin-top: 15px;
    }
  
    p {
      color: #b5bacb;
      font-size: 16px;
      margin-top: 15px;
    }
    .last {
      font-size: 12px;
    }
  }
  </style>
  